<template>
  <div>
      		<transition @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
		<div  class="ball" v-show="ballShow" ref="ball"></div>
		</transition>
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-swipe :auto="4000">
								<mt-swipe-item>
									<img :src="goodsImg.img1" alt="">
								</mt-swipe-item>
								<mt-swipe-item>
									<img :src="goodsImg.img2" alt="">
								</mt-swipe-item>
								<mt-swipe-item>
									<img :src="goodsImg.img3" alt="">
								</mt-swipe-item>
						</mt-swipe>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>￥{{goodsInfo.market_price}}</del>&nbsp;&nbsp;
                            销售价：<span>￥{{goodsInfo.sell_price}}</span>
                        </p>
                        <div>购买数量：
                            <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input id="test" class="mui-input-numbox" type="number" value="1" ref="buynum" />
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				            </div>
                </div>
                        <p class="btn">
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
                        </p>
					</div>
				</div>
				
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsInfo.goodshh}}</p>
						<p>库存情况：{{goodsInfo.stock_quantity}}</p>
						<p>上架时间：{{goodsInfo.addTime | dateFmt}}</p>

					</div>
					<div class="mui-card-footer">
						<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
						<mt-button type="danger" size="large" plain @click="goComments(id)">商品评论</mt-button>
					</div>
				</div>
            </div>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js"
export default {
    data(){
        return {
            id:this.$route.params.id,
            goodsImg:{},
            goodsInfo:{},
            ballShow:false,
            buynum:1

        }
    },
    methods:{
        getImgs(){
            this.$ajax({
                url:"/goodsimg/"+this.id,
                method:'get'
            }).then(resp=>{
                this.goodsImg = resp.data.message[0];
                console.log(this.goodsImg);
            });

        },
        //获取详情
        getGoodsInfo(){
            this.$ajax({
                url:"/goodsinfo/"+this.id,
                method:'get'
            }).then(resp=>{
                this.goodsInfo = resp.data.message[0];
            });

        },
        goDesc(id){
            this.$router.push({name:"goodsDesc",params:{id:id,title:this.goodsInfo.title}});

        },
        goComments(id){
            this.$router.push({name:"goodsComments",params:{id}});
        },
        addToCar(){
            this.ballShow = !this.ballShow;
            //点击购物车获取组件的里的数据
            this.buynum = this.$refs.buynum.value;
            //拼凑一个商品对象添加到购物车中  //{goodsId:  title:  img: price :buynum, selected:该商品是否被选中}
            let ginfo = {
                goodsId:this.id,
                title:this.goodsInfo.title,
                img:this.goodsImg.img1,
                price:this.goodsInfo.sell_price,
                buynum:parseInt(this.buynum),
                selected:true
            }
            this.$store.commit("addToCars",ginfo);//调用vuex中的mutations中的方法
        },
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        }
        ,enter(el,done){
            el.offsetWIdth;
            //由于受分辨率和滚动的原因导致位置不确定
			const ballPosition = this.$refs.ball.getBoundingClientRect();
			const badgePosition = document.getElementById("badge").getBoundingClientRect();
			let x = badgePosition.left - ballPosition.left;
			let y = badgePosition.top - ballPosition.top;
			el.style.transform = `translate(${x}px,${y}px)`;
			el.style.transition = "all 1s ease";
            done();

        },
        afterEnter(el){
            this.ballShow = !this.ballShow;

        }

    },
    created(){
        this.getImgs();
        this.getGoodsInfo();
    },
      mounted() {
		mui('.mui-numbox').numbox(); 
        
    },

}
</script>

<style scoped>
.mint-swipe{
    height: 200px;
}
.btn{
    margin-top:10px;
}
.ball{
   width: 15px;
	height: 15px;
	background-color: red;
	border-radius: 50%;
	position:absolute;
	z-index: 99;
	left:150px;
	top:450px;
}
</style>